<template>
  <div>
    <vxe-toolbar
      id="toolbar_demo3"
      :setting="{storage: true}"
      export
      :buttons="toolbarButtons"
      :refresh="{query: findList}"
    />
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      height="700"
       :loading="loading"
      :data="tableData"
    >
      <template v-slot:empty>
        <p> </p>
      </template>
      <vxe-table-column type="index" width="60" fixed="left" />
      <vxe-table-column title="昵称">
        <vxe-table-column field="reviewer" title="昵称" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="message" placeholder="请输入内容" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column title="电话号码">
        <vxe-table-column field="pageviews" title="电话号码" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="message" placeholder="请输入内容" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column title="角色">
        <vxe-table-column field="reviewer" title="角色" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="message" placeholder="请输入内容" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column title="创建时间">
        <vxe-table-column field="pageviews" title="创建时间" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="message" placeholder="请输入内容" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column title="操作" width="100" fixed="right" />
        <template>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <vxe-button type="text">
              <i class="el-icon-edit" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text">
              <i class="el-icon-delete" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.page"
      :page-size.sync="listQuery.limit"
      :total="listQuery.totalzong"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { fetchList } from '@/api/article'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
export default {
  data() {
    return {
      message: '',
      loading: false,
      tableData: [],
      listQuery: {
        page: 1,
        limit: 13,
        totalzong: 0
      },
      toolbarButtons: [
        {
          code: 'btn1',
          name: '查询'
        },
        {
          name: '下拉按钮',
          dropdowns: [
            {
              name: '按钮111',
              code: 'btn2'
            },
            {
              name: '按钮222',
              code: 'btn3'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.findList()
  },
  methods: {
    findList() {
      this.loading = true
      fetchList(this.listQuery).then(response => {
        this.tableData = response.data.items
        this.listQuery.totalzong = response.data.total
        this.loading = false
      })
    },

    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.page = currentPage
      this.listQuery.limit = pageSize
      this.findList()
    },
    /* footerCellClassName({ $rowIndex, column, columnIndex }) {
      if (columnIndex === 0) {
        if ($rowIndex === 0) {
          return 'col-blue'
        } else {
          return 'col-red'
        }
      }
    }, */
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '平均'
          }
          if (['pageviews', 'forecast'].includes(column.property)) {
            return XEUtils.mean(data, column.property)
          }
          return null
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          if (['pageviews', 'forecast'].includes(column.property)) {
            return XEUtils.sum(data, column.property)
          }
          return null
        })
      ]
    }
  }
}
</script>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
